<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=0">
<link rel="stylesheet" href="../../stylesheets/google/family.css">
<meta charset="utf-8">
<!-- Always force latest IE rendering engine or request Chrome Frame -->
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<!-- Use title if it's in the page YAML frontmatter -->
<title>Core Admin Theme</title>
<link href="../../stylesheets/application.css" media="screen"
	rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
  <script src="../../javascripts/vendor/html5shiv.js" type="text/javascript"></script>
  <script src="../../javascripts/vendor/excanvas.js" type="text/javascript"></script>
  <![endif]-->
<script src="../../javascripts/application.js" type="text/javascript"></script>
</head>
<body>
		<div class="container-fluid">
			<div class="row-fluid">

				<div class="area-top clearfix">
					<div class="pull-left header">
						<h3 class="title">
							<i class="icon-hand-up"></i> Buttons
						</h3>
						<h5>A subtitle can be added here</h5>
					</div>

					<ul class="inline pull-right sparkline-box">

						<li class="sparkline-row">
							<h4 class="blue">
								<span>Orders</span> 847
							</h4>
							<div class="sparkline big" data-color="blue">
								<!--23,17,17,17,13,10,20,9,5,17,4,8-->
							</div>
						</li>

						<li class="sparkline-row">
							<h4 class="green">
								<span>Reviews</span> 223
							</h4>
							<div class="sparkline big" data-color="green">
								<!--4,3,25,22,9,26,21,28,23,21,27,14-->
							</div>
						</li>

						<li class="sparkline-row">
							<h4 class="red">
								<span>New visits</span> 7930
							</h4>
							<div class="sparkline big">
								<!--3,14,6,10,15,9,25,15,6,27,13,18-->
							</div>
						</li>

					</ul>
				</div>
			</div>
		</div>

		<div class="container-fluid padded">
			<div class="row-fluid">

				<!-- Breadcrumb line -->

				<div id="breadcrumbs">
					<div class="breadcrumb-button blue">
						<span class="breadcrumb-label"><i class="icon-home"></i>
							Home</span> <span class="breadcrumb-arrow"><span></span></span>
					</div>


					<div class="breadcrumb-button">
						<span class="breadcrumb-label"> <i class="icon-beaker"></i>
							UI Lab
						</span> <span class="breadcrumb-arrow"><span></span></span>
					</div>


					<div class="breadcrumb-button">
						<span class="breadcrumb-label"> <i class="icon-hand-up"></i>
							Buttons
						</span> <span class="breadcrumb-arrow"><span></span></span>
					</div>
				</div>
			</div>
		</div>

		<div class="container-fluid padded">
			<!-- find me in partials/action_nav_normal_one_row -->

			<!--big normal buttons-->
			<div class="action-nav-normal">

				<div class="row-fluid">
					<div class="span2 action-nav-button">
						<a href="#" title="New Project"> <i class="icon-file-alt"></i>
							<span>New Project</span>
						</a> <span class="triangle-button red"><i class="icon-plus"></i></span>
					</div>

					<div class="span2 action-nav-button">
						<a href="#" title="Messages"> <i class="icon-comments-alt"></i>
							<span>Messages</span>
						</a> <span class="label label-black">14</span>
					</div>

					<div class="span2 action-nav-button">
						<a href="#" title="Files"> <i class="icon-folder-open-alt"></i>
							<span>Files</span>
						</a>
					</div>

					<div class="span2 action-nav-button">
						<a href="#" title="Users"> <i class="icon-user"></i> <span>Users</span>
						</a>
					</div>

					<div class="span2 action-nav-button">
						<a href="#" title="Friends"> <i class="icon-facebook-sign"></i>
							<span>Friends</span>
						</a>
					</div>

					<div class="span2 action-nav-button">
						<a href="#" title="Followers"> <i class="icon-twitter"></i> <span>Followers</span>
						</a>
					</div>
				</div>

			</div>
			<hr class="divider">

			<!-- find me in partials/action_nav_normal_rounded -->

			<!-- big normal buttons rounded -->

			<ul class="action-nav-normal rounded">

				<li class="action-nav-button"><a href="#" class="tip"
					title="New Project"> <i class="icon-file-alt"></i>
				</a></li>

				<li class="action-nav-button"><a href="#" class="tip"
					title="Messages"> <i class="icon-comments-alt"></i>
				</a> <span class="label label-black">14</span></li>

				<li class="action-nav-button"><a href="#" class="tip"
					title="Files"> <i class="icon-folder-open-alt"></i>
				</a></li>

				<li class="action-nav-button"><a href="#" class="tip"
					title="Users"> <i class="icon-user"></i>
				</a></li>

				<li class="action-nav-button"><a href="#" class="tip"
					title="Friends"> <i class="icon-facebook-sign"></i>
				</a></li>

				<li class="action-nav-button"><a href="#" class="tip"
					title="Followers"> <i class="icon-twitter"></i>
				</a></li>

			</ul>

			<hr class="divider">

			<div class="row-fluid">
				<div class="span6">
					<div class="box">
						<div class="box-header">
							<span class="title">Button styles</span>
							<ul class="box-toolbar">
								<li><span class="label label-red">22</span></li>
							</ul>
						</div>

						<div class="box-content padded">

							<div class="page-header">
								<h4>Normal buttons</h4>
							</div>


							<p>

								<button class="btn btn-default">button</button>

								<button class="btn btn-red">button</button>

								<button class="btn btn-blue">button</button>

								<button class="btn btn-green">button</button>

							</p>

							<p>

								<button class="btn btn-gray">button</button>

								<button class="btn btn-black">button</button>

								<button class="btn btn-lightblue">button</button>

								<button class="btn btn-gold">button</button>

							</p>

							<p>

								<button class="btn btn-sea">button</button>

								<button class="btn btn-brown">button</button>

							</p>



							<div class="page-header">
								<h4>Large buttons</h4>
							</div>

							<button class="btn btn-large btn-default">button</button>

							<button class="btn btn-large btn-red">button</button>

							<button class="btn btn-large btn-blue">button</button>

							<button class="btn btn-large btn-green">button</button>


							<div class="page-header">
								<h4>Small buttons</h4>
							</div>

							<button class="btn btn-small btn-default">button</button>

							<button class="btn btn-small btn-red">button</button>

							<button class="btn btn-small btn-blue">button</button>

							<button class="btn btn-small btn-green">button</button>


							<div class="page-header">
								<h4>Mini buttons</h4>
							</div>

							<button class="btn btn-mini btn-default">button</button>

							<button class="btn btn-mini btn-red">button</button>

							<button class="btn btn-mini btn-blue">button</button>

							<button class="btn btn-mini btn-green">button</button>


						</div>
					</div>
				</div>

				<div class="span6">
					<div class="box">
						<div class="box-header">
							<span class="title">Dropdowns</span>
							<ul class="box-toolbar">
								<li><span class="label label-green">68</span></li>
							</ul>
						</div>
						<div class="box-content padded">



							<div class="page-header">
								<h4>Normal dropdowns</h4>
							</div>


							<p>
							<div class="btn-group">
								<button class="btn btn-default  dropdown-toggle"
									data-toggle="dropdown">
									dropdown <span class="caret"></span>
								</button>
								<ul class="dropdown-menu">
									<li><a href="#">Action</a></li>
									<li><a href="#">Another action</a></li>
									<li><a href="#">Something else here</a></li>
									<li class="divider"></li>
									<li><a href="#">Separated link</a></li>
								</ul>
							</div>

							<div class="btn-group">
								<button class="btn btn-red  dropdown-toggle"
									data-toggle="dropdown">
									dropdown <span class="caret"></span>
								</button>
								<ul class="dropdown-menu">
									<li><a href="#">Action</a></li>
									<li><a href="#">Another action</a></li>
									<li><a href="#">Something else here</a></li>
									<li class="divider"></li>
									<li><a href="#">Separated link</a></li>
								</ul>
							</div>

							</p>

							<p>
							<div class="btn-group">
								<button class="btn btn-blue  dropdown-toggle"
									data-toggle="dropdown">
									dropdown <span class="caret"></span>
								</button>
								<ul class="dropdown-menu">
									<li><a href="#">Action</a></li>
									<li><a href="#">Another action</a></li>
									<li><a href="#">Something else here</a></li>
									<li class="divider"></li>
									<li><a href="#">Separated link</a></li>
								</ul>
							</div>

							<div class="btn-group">
								<button class="btn btn-green  dropdown-toggle"
									data-toggle="dropdown">
									dropdown <span class="caret"></span>
								</button>
								<ul class="dropdown-menu">
									<li><a href="#">Action</a></li>
									<li><a href="#">Another action</a></li>
									<li><a href="#">Something else here</a></li>
									<li class="divider"></li>
									<li><a href="#">Separated link</a></li>
								</ul>
							</div>

							</p>




							<div class="page-header">
								<h4>Large dropdowns</h4>
							</div>


							<p>
							<div class="btn-group">
								<button class="btn btn-default btn-large dropdown-toggle"
									data-toggle="dropdown">
									dropdown <span class="caret"></span>
								</button>
								<ul class="dropdown-menu">
									<li><a href="#">Action</a></li>
									<li><a href="#">Another action</a></li>
									<li><a href="#">Something else here</a></li>
									<li class="divider"></li>
									<li><a href="#">Separated link</a></li>
								</ul>
							</div>

							<div class="btn-group">
								<button class="btn btn-red btn-large dropdown-toggle"
									data-toggle="dropdown">
									dropdown <span class="caret"></span>
								</button>
								<ul class="dropdown-menu">
									<li><a href="#">Action</a></li>
									<li><a href="#">Another action</a></li>
									<li><a href="#">Something else here</a></li>
									<li class="divider"></li>
									<li><a href="#">Separated link</a></li>
								</ul>
							</div>

							</p>

							<p>
							<div class="btn-group">
								<button class="btn btn-blue btn-large dropdown-toggle"
									data-toggle="dropdown">
									dropdown <span class="caret"></span>
								</button>
								<ul class="dropdown-menu">
									<li><a href="#">Action</a></li>
									<li><a href="#">Another action</a></li>
									<li><a href="#">Something else here</a></li>
									<li class="divider"></li>
									<li><a href="#">Separated link</a></li>
								</ul>
							</div>

							<div class="btn-group">
								<button class="btn btn-green btn-large dropdown-toggle"
									data-toggle="dropdown">
									dropdown <span class="caret"></span>
								</button>
								<ul class="dropdown-menu">
									<li><a href="#">Action</a></li>
									<li><a href="#">Another action</a></li>
									<li><a href="#">Something else here</a></li>
									<li class="divider"></li>
									<li><a href="#">Separated link</a></li>
								</ul>
							</div>

							</p>




							<div class="page-header">
								<h4>Small dropdowns</h4>
							</div>


							<p>
							<div class="btn-group">
								<button class="btn btn-default btn-small dropdown-toggle"
									data-toggle="dropdown">
									dropdown <span class="caret"></span>
								</button>
								<ul class="dropdown-menu">
									<li><a href="#">Action</a></li>
									<li><a href="#">Another action</a></li>
									<li><a href="#">Something else here</a></li>
									<li class="divider"></li>
									<li><a href="#">Separated link</a></li>
								</ul>
							</div>

							<div class="btn-group">
								<button class="btn btn-red btn-small dropdown-toggle"
									data-toggle="dropdown">
									dropdown <span class="caret"></span>
								</button>
								<ul class="dropdown-menu">
									<li><a href="#">Action</a></li>
									<li><a href="#">Another action</a></li>
									<li><a href="#">Something else here</a></li>
									<li class="divider"></li>
									<li><a href="#">Separated link</a></li>
								</ul>
							</div>

							</p>

							<p>
							<div class="btn-group">
								<button class="btn btn-blue btn-small dropdown-toggle"
									data-toggle="dropdown">
									dropdown <span class="caret"></span>
								</button>
								<ul class="dropdown-menu">
									<li><a href="#">Action</a></li>
									<li><a href="#">Another action</a></li>
									<li><a href="#">Something else here</a></li>
									<li class="divider"></li>
									<li><a href="#">Separated link</a></li>
								</ul>
							</div>

							<div class="btn-group">
								<button class="btn btn-green btn-small dropdown-toggle"
									data-toggle="dropdown">
									dropdown <span class="caret"></span>
								</button>
								<ul class="dropdown-menu">
									<li><a href="#">Action</a></li>
									<li><a href="#">Another action</a></li>
									<li><a href="#">Something else here</a></li>
									<li class="divider"></li>
									<li><a href="#">Separated link</a></li>
								</ul>
							</div>

							</p>




							<div class="page-header">
								<h4>Mini dropdowns</h4>
							</div>


							<p>
							<div class="btn-group">
								<button class="btn btn-default btn-mini dropdown-toggle"
									data-toggle="dropdown">
									dropdown <span class="caret"></span>
								</button>
								<ul class="dropdown-menu">
									<li><a href="#">Action</a></li>
									<li><a href="#">Another action</a></li>
									<li><a href="#">Something else here</a></li>
									<li class="divider"></li>
									<li><a href="#">Separated link</a></li>
								</ul>
							</div>

							<div class="btn-group">
								<button class="btn btn-red btn-mini dropdown-toggle"
									data-toggle="dropdown">
									dropdown <span class="caret"></span>
								</button>
								<ul class="dropdown-menu">
									<li><a href="#">Action</a></li>
									<li><a href="#">Another action</a></li>
									<li><a href="#">Something else here</a></li>
									<li class="divider"></li>
									<li><a href="#">Separated link</a></li>
								</ul>
							</div>

							</p>

							<p>
							<div class="btn-group">
								<button class="btn btn-blue btn-mini dropdown-toggle"
									data-toggle="dropdown">
									dropdown <span class="caret"></span>
								</button>
								<ul class="dropdown-menu">
									<li><a href="#">Action</a></li>
									<li><a href="#">Another action</a></li>
									<li><a href="#">Something else here</a></li>
									<li class="divider"></li>
									<li><a href="#">Separated link</a></li>
								</ul>
							</div>

							<div class="btn-group">
								<button class="btn btn-green btn-mini dropdown-toggle"
									data-toggle="dropdown">
									dropdown <span class="caret"></span>
								</button>
								<ul class="dropdown-menu">
									<li><a href="#">Action</a></li>
									<li><a href="#">Another action</a></li>
									<li><a href="#">Something else here</a></li>
									<li class="divider"></li>
									<li><a href="#">Separated link</a></li>
								</ul>
							</div>

							</p>



						</div>
					</div>
				</div>
			</div>

			<div class="row-fluid">
				<div class="span6">
					<div class="box">
						<div class="box-header">
							<span class="title">Split dropdowns</span>
							<ul class="box-toolbar">
								<li><input class="iButton-icons" type="checkbox"
									checked="checked" /></li>
							</ul>
						</div>
						<div class="box-content padded">



							<div class="btn-group">
								<button class="btn btn-default">Actions</button>
								<button class="btn btn-default dropdown-toggle"
									data-toggle="dropdown">
									<span class="caret"></span>
								</button>
								<ul class="dropdown-menu">
									<li><a href="#">Action</a></li>
									<li><a href="#">Another action</a></li>
									<li><a href="#">Something else here</a></li>
									<li class="divider"></li>
									<li><a href="#">Separated link</a></li>
								</ul>
							</div>



							<div class="btn-group">
								<button class="btn btn-red">Actions</button>
								<button class="btn btn-red dropdown-toggle"
									data-toggle="dropdown">
									<span class="caret"></span>
								</button>
								<ul class="dropdown-menu">
									<li><a href="#">Action</a></li>
									<li><a href="#">Another action</a></li>
									<li><a href="#">Something else here</a></li>
									<li class="divider"></li>
									<li><a href="#">Separated link</a></li>
								</ul>
							</div>



							<div class="btn-group">
								<button class="btn btn-blue">Actions</button>
								<button class="btn btn-blue dropdown-toggle"
									data-toggle="dropdown">
									<span class="caret"></span>
								</button>
								<ul class="dropdown-menu">
									<li><a href="#">Action</a></li>
									<li><a href="#">Another action</a></li>
									<li><a href="#">Something else here</a></li>
									<li class="divider"></li>
									<li><a href="#">Separated link</a></li>
								</ul>
							</div>



							<div class="btn-group">
								<button class="btn btn-green">Actions</button>
								<button class="btn btn-green dropdown-toggle"
									data-toggle="dropdown">
									<span class="caret"></span>
								</button>
								<ul class="dropdown-menu">
									<li><a href="#">Action</a></li>
									<li><a href="#">Another action</a></li>
									<li><a href="#">Something else here</a></li>
									<li class="divider"></li>
									<li><a href="#">Separated link</a></li>
								</ul>
							</div>



						</div>
					</div>
				</div>

				<div class="span6">
					<div class="box">
						<div class="box-header">
							<span class="title">Toolbars</span>
							<ul class="box-toolbar">
								<li>
									<form class="fill-up" style="width: 100px">
										<label class="input-with-submit"> <input type="text"
											placeholder="Search..." />
											<button type="submit" class="submit-icon">
												<i class="icon-search"></i>
											</button>
										</label>
									</form>
								</li>
							</ul>
						</div>

						<div class="box-content padded">
							<div class="btn-toolbar" style="margin: 0;">
								<div class="btn-group">
									<button class="btn btn-default">
										<i class="icon-file"></i>
									</button>
									<button class="btn btn-default">
										<i class="icon-folder-open-alt"></i>
									</button>
									<button class="btn btn-default">
										<i class="icon-save"></i>
									</button>
								</div>
								<div class="btn-group">
									<button class="btn btn-default">
										<i class="icon-cut"></i>
									</button>
									<button class="btn btn-default">
										<i class="icon-copy"></i>
									</button>
									<button class="btn btn-default">
										<i class="icon-paste"></i>
									</button>
								</div>
								<div class="btn-group">
									<button class="btn btn-default">
										<i class="icon-download-alt"></i>
									</button>
									<button class="btn btn-default">
										<i class="icon-search"></i>
									</button>
									<button class="btn btn-default">
										<i class="icon-lock"></i>
									</button>
									<button class="btn btn-default">
										<i class="icon-comment-alt"></i>
									</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="row-fluid">
				<div class="span6">
					<div class="box">
						<div class="box-header">
							<span class="title">Icon Buttons</span>
							<ul class="box-toolbar">
								<li>
									<form class="fill-up" style="width: 100px">
										<label class="input-with-submit"> <input type="text"
											placeholder="Insert coin..." />
											<button type="submit" class="submit-icon">
												<i class="icon-angle-right"></i>
											</button>
										</label>
									</form>
								</li>
							</ul>
						</div>

						<div class="box-content padded">
							<button class="btn btn-blue">
								<i class="icon-home"></i> Home
							</button>
							<button class="btn btn-default">
								<i class="icon-cog"></i> Options
							</button>
							<button class="btn btn-default">
								<i class="icon-bar-chart"></i> Charts
							</button>

							<div class="btn-group">
								<button class="btn btn-default">
									<i class="icon-wrench"></i> Actions
								</button>
								<button class="btn btn-default dropdown-toggle"
									data-toggle="dropdown">
									<span class="caret"></span>
								</button>
								<ul class="dropdown-menu">
									<li><a href="#">Action</a></li>
									<li><a href="#">Another action</a></li>
									<li><a href="#">Something else here</a></li>
									<li class="divider"></li>
									<li><a href="#">Separated link</a></li>
								</ul>
							</div>

							<div class="btn-group">
								<button class="btn btn-default dropdown-toggle"
									data-toggle="dropdown">
									<i class="icon-pencil"></i> Edit <span class="caret"></span>
								</button>
								<ul class="dropdown-menu">
									<li><a href="#"><i class="icon-cut"></i> Cut</a></li>
									<li><a href="#"><i class="icon-copy"></i> Copy</a></li>
									<li><a href="#"><i class="icon-paste"></i> Paste</a></li>
								</ul>
							</div>
						</div>
					</div>
				</div>

				<div class="span6">
					<div class="box">
						<div class="box-header relative">
							<span class="title">Triangle buttons</span> <span
								class="triangle-button blue"><i
								class="icon-question-sign"></i></span>
						</div>

						<div class="box-content padded relative">
							<p>Any icons you see in this theme are FontAwesome. Abuse
								them :)</p>

							<div class="row-fluid">


								<div class="span3">
									<div class="well relative">
										<span class="triangle-button red"><i class="icon-plus"></i></span>
										some content
									</div>
								</div>

								<div class="span3">
									<div class="well relative">
										<span class="triangle-button green"><i
											class="icon-bell"></i></span> some content
									</div>
								</div>

								<div class="span3">
									<div class="well relative">
										<span class="triangle-button blue"><i class="icon-ok"></i></span>
										some content
									</div>
								</div>

								<div class="span3">
									<div class="well relative">
										<span class="triangle-button orange"><i
											class="icon-pencil"></i></span> some content
									</div>
								</div>
							</div>
							<p>You can add triangle buttons to any container. Here I'm
								using bootstrap's wells</p>
						</div>
					</div>
				</div>
			</div>
			<div style="height: 150px;"></div>
		</div>
</body>
</html>